<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bilibili User Card - Full Screen</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        @keyframes float {
            0% {
                transform: translateY(0px);
            }
            50% {
                transform: translateY(-20px);
            }
            100% {
                transform: translateY(0px);
            }
        }

        body, html {
            height: 100%;
            font-family: Arial, sans-serif;
            background-color: #fb7299;
            background-image: radial-gradient(circle at 10% 20%, rgba(255, 255, 255, 0.2) 0%, transparent 20%),
            radial-gradient(circle at 90% 80%, rgba(255, 255, 255, 0.2) 0%, transparent 20%),
            linear-gradient(to bottom right, #fb7299, #fc9cba);
            overflow: hidden;
        }

        .background-text {
            position: absolute;
            color: rgba(255, 255, 255, 0.1);
            font-size: 100px;
            font-weight: bold;
            pointer-events: none;
            user-select: none;
            white-space: nowrap;
        }

        .text-1 {
            top: 5%;
            left: -50px;
            animation: float 8s infinite;
        }

        .text-2 {
            top: 40%;
            right: -50px;
            animation: float 10s infinite;
        }

        .text-3 {
            bottom: 10%;
            left: 50%;
            animation: float 9s infinite;
        }

        .fullscreen-card {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            position: relative;
            z-index: 1;
        }

        .card {
            background-color: white;
            border-radius: 20px;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 30px;
            width: 100%;
            max-width: 500px;
            position: relative;
        }

        .avatar-container {
            position: absolute;
            top: -40px;
            right: 30px;
            width: 120px;
            height: 120px;
        }

        .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            border: 6px solid white;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
        }

        .avatar-badge {
            position: absolute;
            bottom: 0;
            right: 0;
            background-color: #ff69b4;
            color: white;
            width: 36px;
            height: 36px;
            border-radius: 50%;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 20px;
            font-weight: bold;
            border: 3px solid white;
        }

        .username {
            font-size: 28px;
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }

        .user-info {
            font-size: 18px;
            color: #666;
            margin-bottom: 15px;
        }

        .level {
            display: inline-block;
            background-color: #fb7299;
            color: white;
            font-size: 16px;
            padding: 3px 8px;
            border-radius: 4px;
            margin-top: 10px;
        }

        .stats {
            display: flex;
            justify-content: space-between;
            margin-top: 25px;
        }

        .stat {
            background-color: #f8f8f8;
            border-radius: 12px;
            padding: 15px;
            text-align: center;
            width: 30%;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            margin-bottom: 8px;
        }

        .stat-label {
            font-size: 16px;
            color: #666;
        }
    </style>
</head>
<body>
<div class="background-text text-1">哔哩哔哩</div>
<div class="background-text text-2">Bilibili</div>
<div class="background-text text-3">B站</div>
<div class="fullscreen-card">
    <div class="card">
        <div class="avatar-container">
            <img src="{{ biliInfoData.face }}" alt="用户头像" class="avatar">
            {{ if biliInfoData.vipStatus == '1' }}
            <div class="avatar-badge">大</div>
            {{ /if  }}
        </div>
        <div class="username">{{ biliInfoData.uname }}</div>
        <div class="user-info">
            硬币: {{ biliInfoData.money }} B币: {{ biliInfoData.wallet.bcoin_balance }}
        </div>
        <div class="level">LV{{ biliInfoData.level_info.current_level }}</div>
        <div class="stats">
            <div class="stat">
                <div class="stat-value">{{ biliInfoData.following }}</div>
                <div class="stat-label">关注</div>
            </div>
            <div class="stat">
                <div class="stat-value">{{ biliInfoData.follower }}</div>
                <div class="stat-label">粉丝</div>
            </div>
            <div class="stat">
                <div class="stat-value">{{ biliInfoData.dynamic_count }}</div>
                <div class="stat-label">动态</div>
            </div>
        </div>
    </div>
</div>
</body>
</html>
